// 采用IIFE模式防止变量污染全局
; (function () {
  var Waterfall = function (opt) {
    // 获取页面的DOM元素和参数值
    this.el = document.getElementsByClassName(opt.el)[0]
    this.oItems = this.el.getElementsByTagName('div')
    this.column = opt.column;
    this.gap = opt.gap
    this.itemWidth = (this.el.offsetWidth - this.gap * (this.column - 1)) / this.column
    // 保存每一排的高度
    this.heightArr = []
    // console.log(this.itemWidth);
    this.init()

  }

  Waterfall.prototype.init = function () {
    this.render()
  }

  Waterfall.prototype.render = function () {
    var item = null,
      minIndex = -1
    for (var i = 0; i < this.oItems.length; i++) {
      item = this.oItems[i]
      item.style.width = this.itemWidth + 'px'

      if (i < this.column) {
        // 第一排元素的设置
        item.style.top = '0px'
        item.style.left = i * (this.itemWidth + this.gap) + 'px'
        this.heightArr.push(item.offsetHeight)
      } else {
        // 其余各排 每个图片放在高度最下的下面
        minIndex = getMinIndex(this.heightArr)
        // 每一列左值相同
        item.style.left = this.oItems[minIndex].offsetLeft + 'px'
        // 高度值等于 上一排的高度加上gap值1
        item.style.top = this.heightArr[minIndex] + this.gap + 'px'

        this.heightArr[minIndex] = this.heightArr[minIndex] + item.offsetHeight + this.gap
      }
    }

    // 函数过去数组中最小数的下标 
    function getMinIndex(arr) {
      return arr.indexOf(Math.min.apply(null, arr))
    }


  }
  // 挂载到全局使用
  window.Waterfall = Waterfall
})();
